<template>
  <div :class="classStyle">
    <div class="header-title">问题量、业务量趋势</div>
    <div class="search-list">
      <div class="search-list-item">
        <VptSelect
          label="时间"
          :value="timeValue"
          :options="timeList"
          :width="chartOptions.select.width"
          :model="chartOptions.model"
          :labelWidth="chartOptions.select.time.labelWidth"
          @change-tab="changeTime"
        ></VptSelect>
      </div>

      <div class="search-list-item">
        <VptSelect
          label="业务模块"
          :value="typeValue"
          :options="typeList"
          :width="chartOptions.select.width"
          :model="chartOptions.model"
          :labelWidth="chartOptions.select.bns.labelWidth"
          @change-tab="changeType"
        ></VptSelect>
      </div>

      <div class="search-list-item">
        <VptSelect
          label="范围"
          :value="radiusValue"
          :options="radiusList"
          :model="chartOptions.model"
          :width="chartOptions.select.width"
          :labelWidth="chartOptions.select.scope.labelWidth"
          @change-tab="changeRadius"
        ></VptSelect>
      </div>
    </div>

    <VptLine
      class="base-echart"
      autoRander
      v-bind="chartProps"
      :chartType="chartType"
    >
    </VptLine>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import VptLine from "@/components/echarts/vpt-line/index.vue";
import VptSelect from "@/components/form/vpt-select/index.vue";
import { fontSize } from "@/utils/rem/rem.js";
import { useRouterStore } from "@/store/routerStore.js";

const props = defineProps({
  chartType: {
    type: String,
    default: "",
  },
  chartData: { type: Array, default: () => [] },
  chartOptions: {
    type: Object,
    default: () => {
      return {
        model: " 1",
        select: {
          width: 1,
          time: {
            labelWidth: "",
          },
          bns: {
            labelWidth: "",
          },
          scope: {
            labelWidth: "",
          },
        },
        grid: {
          top: 180,
          bottom: 0,
        },
        legendProps: {
          top: 12,
        },
      };
    },
  },
  isLandscape: { type: Boolean, default: false },
});

const emit = defineEmits(["updateChart"]);

const timeList = ref([
  { value: "01", label: "近7日", disabled: false },
  { value: "02", label: "近6个月", disabled: false },
]);

const typeList = ref([
  { value: "0", label: "全部", disabled: false },
  { value: "1", label: "预算域", disabled: true },
  { value: "2", label: "执行域", disabled: true },
  { value: "3", label: "核算域", disabled: true },
]);

const radiusList = ref([
  { value: "01", label: "全省", disabled: false },
  { value: "02", label: "省本级", disabled: false },
]);

const timeValue = ref("01");
const radiusValue = ref("01");
const typeValue = ref("0");
const routerStore = useRouterStore();

const data = computed(() => {
  return legendData.value.map((item) => {
    if (item.includes("业务量")) {
      return props.chartData.map((v) => v.num_businesss);
    } else {
      return props.chartData.map((v) => v.num_question);
    }
  });
});

const classStyle = computed(() => {
  return (
    {
      horvsreen: "echart-ly-flex2",
      largescreen: "echart-ly-flex3",
      largeverscreen: "echart-ly-flex4",
    }[routerStore.prefix] || "echart-ly-flex1"
  );
});

const otherProps = computed(() => {
  return (
    {
      horvsreen: getHorvreenProps(),
      largescreen: getHorvreenProps(),
      largeverscreen: getLargeverscreenProps(),
    }[routerStore.prefix] || {}
  );
});

const chartProps = computed(() => {
  // 横坐标数据
  const xData = props.chartData.map((v) => v.data_time);
  // const otherProps = props.isLandscape ? getHorvreenProps() : {};
  return {
    height: "240",
    chartTitle: "",
    grid: {
      top: fontSize(props.chartOptions.grid.top),
      bottom: fontSize(props.chartOptions.grid.bottom),
      right: fontSize(15),
    },
    legendProps: {
      top: fontSize(props.chartOptions.legendProps.top),
    },
    legendData: legendData.value,
    chartData: data.value.length ? data.value : [],
    // splitNumber: 3,
    xAxisData: xData,
    dataZoom: {
      show: false,
      endValue: "auto",
    },
    xAxisFontSize: 14,
    yAxisFontSize: 14,
    ...otherProps.value,
  };
});

const legendData = computed(() => {
  const value = radiusValue.value === "01" ? "全省" : "省本级";
  return [`业务量(${value})`, `问题量(${value})`];
});

// 获取横屏重置图表配置项
const getHorvreenProps = () => {
  return {
    itemGapFontSize: 20,
    legendTextStyleFontSize: 14,
    grid: {
      top: fontSize(60),
      bottom: fontSize(10),
    },
    legendProps: {
      top: fontSize(15),
    },
  };
};

const getLargeverscreenProps = () => {
  return {
    itemGapFontSize: 20,
    legendTextStyleFontSize: 12,
    grid: {
      top: fontSize(50),
      bottom: fontSize(10),
    },
    legendProps: {
      top: fontSize(10),
    },
  };
};

const changeTime = (value) => {
  timeValue.value = value;
  updateData();
};

const changeRadius = (value) => {
  radiusValue.value = value;
  updateData();
};

const changeType = (value) => {
  typeValue.value = value;
  // updateData()
};

const updateData = () => {
  const params = {
    data_code: timeValue.value || undefined,
    mof_code: radiusValue.value || undefined,
    // mof_div_code: typeValue.value || undefined,
  };
  emit("updateChart", params);
};
</script>
<style lang="less" scoped>
@import url("../../../../../assets/style/echarts.less");
@import url("./index.less");
</style>
